//点击头部跳转首页
$(".headerUl li").each(function(i,n){
    $(n).click(function(){
        window.location.href="../index.html"
    })
})

//登录
$("#login").click(function(){
    var url=window.location.href;
    setCookie("backUrl",url,7);
    window.location.href="../html/login.html";
})
$("#join").click(function(){
    var url=window.location.href;
    setCookie("backUrl",url,7);
    window.location.href="../html/join.html";
})
//获取地址栏id
var url=window.location.search;
var id=url.substring(1,url.length).split("=")[1];
$.ajax({
    type: "get",
    url: "../php/xiangqing.php",
    data: {"id":id},
    dataType: "json",
    success: function (obj) {
        // var smallimg=obj["smallimg"];
        // var price=obj["price"];
        // var goodsname=obj["goodsname"];
        // var miaoshu=obj["miaoshu"];
        // var color=obj["color"];
        // var dingzhi=obj["dingzhi"];
        var {
            smallimg,price1,goodsname,miaoshu,color,dingzhi,
        }=obj;
        $("#changePicture").attr("src",`../images/${smallimg}`);
        $("#bigimg").attr("src",`../images/${smallimg}`);
        $(".carNav li:last-child").attr("data-img",`../images/${smallimg}`);
        $(".carNavLi3").attr("src",`../images/${smallimg}`);
        // var color1=obj.color.split(",")[0];
        // var color2=obj.color.split(",")[1];
        // var color3=obj.color.split(",")[2];
        // console.log(color);
        var html=`
            <h1>${goodsname}</h1>
            <p class="xqp1">${miaoshu}</p>
            <h3 class="iconfont icon-qian">${price1.split(",")[0]}</h3>
            <p class="xqp2">礼物颜色</p>
            <ul class="cl xq1Ul">
                <li>${color.split(",")[0]}</li>
                <li>${color.split(",")[1]}</li>
                <li>${color.split(",")[2]}</li>
            </ul>
            <p class="xqp2">个性定制</p>
            <ul class="cl xq2Ul">
                <li data-price=${price1.split(",")[0]}>${dingzhi.split(",")[0]}</li>
                <li data-price=${price1.split(",")[1]}>${dingzhi.split(",")[1]}</li>
                <li data-price=${price1.split(",")[2]}>${dingzhi.split(",")[2]}</li>
            </ul>
        `
        $(".buybox").before(html);
    }
});
//获取颜色内容
$(document).on("click",".xq1Ul li",function(){
   $(".xq1Ul li").each(function(i,n){
        $(n).css("border","1px solid #ccc");
        $(this).removeClass("selected");
   })
    $(this).css("border","1px solid red");
    
    $(this).addClass("selected");
})
//点击价格改变
$(document).on("click",".xq2Ul li",function(){
    $(".xq2Ul li").each(function(i,n){
        $(n).css("border","1px solid #ccc");
        $(this).removeClass("selected");
   })
   $(this).css("border","1px solid red");
   var price=$(this).attr("data-price");
   $(".icon-qian").html(price);
   $(this).addClass("selected");
})
//buy
$("#buy").click(function(){
    var price=$(".icon-qian").html();
    var goodsColor=$(".xq1Ul .selected").html();
    var dingzhi=$(".xq2Ul .selected").html();
    var goodsname=$(".xiangqing2 h1").html();
    if(price&&goodsColor&&dingzhi){
        if(getCookie("logintel")){
            var usertel=getCookie("logintel");
            $.ajax({
                type: "get",
                url: "../php/lurushopping.php",
                data: {"goodsid":id,"price":price,"goodsColor":goodsColor,"dingzhi":dingzhi,"usertel":usertel,"goodsname":goodsname},
                success: function (count) {
                    if(count>0){
                        window.location.href="../html/shopping.html"
                      
                    }else{
                        alert("加购失败")
                    }
                }
            });


            
        }else{
            var url=window.location.href;
            setCookie("backUrl",url,7);
            window.location.href="../html/login.html";
        }
       
    }else{
        alert("请先选择颜色和定制")
    }
})


$(".carNav li").each(function(i,n){
    $(n).mousemove(function(){
        var src=$(this).attr("data-img");
        $("#changePicture").attr({src:src});
        $("#bigimg").attr({src:src});
    })

})
//放大镜
var smallShadowWidth=$("#smallShadow").width();
var shadowWidth=$("#shadow").width();
var maxLeft=$(".picture").width()-smallShadowWidth;
var maxTop=$(".picture").height()-smallShadowWidth;
// var box=document.querySelector(".picture");
$(".picture").mousemove(function(e){
    $("#shadow").css("display","block");
    $("#smallShadow").css("display","block");
    var e=window.event||e;
    var boxLeft=$(".picture").offset().left;
    var boxTop=$(".picture").offset().top;
    var pageX=e.pageX;
    var pageY=e.pageY;
    var x=pageX-boxLeft-smallShadowWidth/2;
    var y=pageY-boxTop-smallShadowWidth/2;

    if(x<=0){
        x=0;
    }
    if(x>=maxLeft){
        x=maxLeft;

    }
    if(y<=0){
        y=0;
    }
    
    if(y>=maxTop){
        y=maxTop;
    }
    var imgX=x*shadowWidth/smallShadowWidth;
    var imgY=y*shadowWidth/smallShadowWidth;
    var shadowX=x-(shadowWidth-smallShadowWidth)/2;
    var shadowY=y-(shadowWidth-smallShadowWidth)/2;


    $("#smallShadow").css({left:x,top:y});
    $("#bigimg").css({left:-imgX,top:-imgY});
    $("#shadow").css({left:shadowX,top:shadowY});
})

$(".picture").mouseout(function(){
    $("#shadow").css("display","none");
    $("#smallShadow").css("display","none");
})

//购物车
var usertel=getCookie("logintel");
if(usertel){
    $.ajax({
        type: "get",
        url: "../php/num.php",
        data: {"usertel":usertel},
        dataType: "json",
        success: function (item) {
            if(item[0]>0){
                $("#shoppingcar").html(item[0]);
                $("#shoppingcar").css("display","block");
            }
        }
    });
}

$(".icon-tubiaolunkuo-").click(function(){
    window.location.href="../html/shopping.html";
})
//登录以后小人里面放用户电话号码
$(".icon-gerenxinxi").hover(
    function(){
        if(getCookie("logintel")){
            $(".xinxiboxLi").html(getCookie("logintel"))
        }
    }
)